<!--
 * @Description: echarts图表 公共组件
 * @Author: Zhanghan
 * @Date: 2024-11-09 20:38:32
 * @LastEditTime: 2025-01-06 21:45:25
 * @LastEditors: Zhanghan
-->
<template>
  <ElCard
    :id="state.id"
    :style="{ width: width}"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div
      ref="chartRef"
      :style="{
        width: state?.isFullScreen ? '99.9vw' : width,
        height: state?.isFullScreen ? '99.9vh' : height,
      }"
    ></div>
  </ElCard>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { ElCard } from "element-plus";
import {
  getId,
  getToolbox,
  requestFullScreen,
  exitFullscreen,
} from "@/lib/function";
import echarts from "@/lib/echarts";

defineOptions({ name: "ProEchartsCard" });
const emits = defineEmits(["clickCharts"]);

const props = withDefaults(
  defineProps<{ option: any; width?: string; height?: string }>(),
  {
    width: "480px",
    height: "360px",
  }
);

const chartRef = ref<HTMLElement | null>(null);

const myChart = ref();

const state = reactive<{
  isShowTool: boolean; // 是否显示工具栏
  isFullScreen: any; // 是否全屏展示
  id: string;
}>({
  isShowTool: false,
  isFullScreen: false,
  id: getId(),
});

onMounted(() => {
  watchFullScreen();
  init();
});

//初始化
const init = async () => {
  // 首先判断 myChart.value 是否已经初始化
  if (myChart.value) {
    // 移除之前的点击事件监听
    myChart.value.off("click");
  }

  myChart.value = await echarts.init(chartRef.value);

  //避免触发多次事件监听
  await myChart.value.on("click", function (params: any) {
    // console.log(params?.data);
    emits("clickCharts", params?.data);
  });

  await myChart.value.setOption({
    toolbox: getToolbox(
      state?.isShowTool,
      state?.isFullScreen,
      fullScreen,
      "我的标题",
      10,
      28
    ),
    ...props.option,
  });
};

/*
全屏监听事件
通过 document.addEventListener 方法，注册了三个不同浏览器
的全屏变化事件监听器（fullscreenchange、webkitfullscreenchange 和 mozfullscreenchange），
以确保在各种浏览器环境下都能正确响应全屏状态的变化。
*/
const watchFullScreen = () => {
  document.addEventListener(
    "fullscreenchange",
    () => {
      state.isFullScreen = document.fullscreenElement;
    },
    false
  );
  document.addEventListener(
    "webkitfullscreenchange",
    () => {
      // @ts-ignore
      state.isFullScreen = document.webkitIsFullScreen;
    },
    false
  );
  document.addEventListener(
    "mozfullscreenchange",
    () => {
      // @ts-ignore
      state.isFullScreen = document.mozFullScreenElement;
    },
    false
  );
};

//屏幕尺寸发生变化时，重置大小
window.addEventListener("resize", () => {
  myChart.value.resize();
});

// 全屏点击事件
const fullScreen = () => {
  const { isFullScreen } = state;
  if (!isFullScreen) {
    requestFullScreen(state.id);
  } else {
    exitFullscreen();
  }
  state.isFullScreen = !isFullScreen;
  //这里重新调用init方法 解决.resize()方法不生效的问题
  init();
};

//鼠标移入事件
const handleMouseEnter = () => {
  state.isShowTool = true;
  init();
};

//鼠标移出事件
const handleMouseLeave = () => {
  state.isShowTool = false;
  init();
};
</script>
